<template>
  <div class="user">
    <div class="user-image">
      <img :src="business.avatar_cdn" />
    </div>
  </div>

  <!-- 表单结构 -->
  <van-form @submit="OnSubmit">
    <!-- 昵称 -->
    <van-field
      v-model="business.nickname"
      name="nickname"
      label="昵称"
      placeholder="请输入昵称"
      :rules="[{ required: true, message: '请输入昵称' }]"
    />

    <!-- 手机号码 -->
    <van-field
      v-model="business.mobile"
      name="mobile"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[
        { required: true, message: '请输入手机号码' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' },
      ]"
    />

    <!-- 邮箱 -->
    <van-field
      v-model="business.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      :rules="[
        { required: true, message: '请输入邮箱' },
        {
          pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
          message: '邮箱格式不正确',
        },
      ]"
    />

    <!-- 密码 -->
    <van-field
      v-model="business.password"
      type="password"
      name="password"
      label="密码"
      placeholder="请输入密码"
    />

    <!-- 性别 -->
    <van-field name="gender" label="性别">
      <template #input>
        <van-radio-group v-model="business.gender" direction="horizontal">
          <van-radio name="0">保密</van-radio>
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 地区 -->
    <van-field
      name="region"
      label="地区选择"
      placeholder="点击选择省市区"
      v-model="business.region_text"
      readonly
      is-link
      @click="AreaShow = true"
    />

    <!-- 弹出框组件 -->
    <van-popup v-model:show="AreaShow" round position="bottom">
      <!-- 地区组件 -->
      <van-area
        v-model="code"
        title="地区选择"
        :area-list="areaList"
        @cancel="AreaShow = false"
        @confirm="OnAreaConfirm"
      />
    </van-popup>

    <!-- 头像上传 -->
    <van-field label="上传头像">
      <!-- 插槽重新输入框部分，用文件上传来代替 -->
      <template #input>
        <van-uploader v-model="avatar" :max-count="1" />
      </template>
    </van-field>

    <div style="width: 80%; margin: 2em auto">
      <van-button
        :loading="loading"
        round
        block
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
        native-type="submit"
        >提交</van-button
      >
    </div>
  </van-form>
</template>

<script setup>
// 引入地区数据
import { areaList } from "@vant/area-data";

const { proxy } = getCurrentInstance();

// 获取个人资料信息
const business = proxy.$business;

// 定义loading状态
const loading = ref(false);

// 地区选择组件显示状态
const AreaShow = ref(false);
// 地区码 传参
const code = ref(
  business.value.district
    ? business.value.district
    : business.value.city
    ? business.value.city
    : business.value.province
);

// 上传框的值
const avatar = ref([
  {
    url: business.value.avatar_cdn,
  },
]);

// 表单提交事件
const OnSubmit = async (values) => {
  // 组装参数
  let params = {
    id: business.value.id,
    nickname: values.nickname,
    mobile: values.mobile,
    email: values.email,
    gender: values.gender,
  };
  // 如果有输入密码则表示要修改密码
  if (values.password) {
    params.password = values.password;
  }
  // 如果有选择地区
  if (code.value) {
    params.code = code.value;
  }
  // 如果有上传头像
  if (avatar.value[0]?.file) {
    params.avatar = avatar.value[0]?.file;
  }
  // 发起请求
  let result = await proxy.$http.upload({
    url: "/business/profile",
    params,
  });
  // 根据请求结果进行后续处理
  if (result.code === 1) {
    proxy.$success({
      message: result.msg,
      onClose: () => {
        proxy.$router.back();
      },
    });
  } else {
    proxy.$fail(result.msg);
  }
};

// 地区选择确认事件
const OnAreaConfirm = ({ selectedOptions }) => {
  // console.log(selectedOptions);
  // 获取省市区并且分别赋值新的变量
  const [province, city, district] = selectedOptions;
  // 存放拼接好的地区
  let RegionText = "";
  // 存放地区编码
  let RegionCode = 0;
  // 省
  if (province.value) {
    RegionText = province.text + "/";
    RegionCode = province.value;
  }
  // 市
  if (city.value) {
    RegionText += city.text + "/";
    RegionCode = city.value;
  }
  // 区
  if (district.value) {
    RegionText += district.text;
    RegionCode = district.value;
  }

  // 关闭弹出层
  AreaShow.value = false;
  // 响应式数据重新赋值
  business.value.region_text = RegionText;
  code.value = RegionCode;
};
</script>

<style scoped>
@import url("/assets/css/BusinessProfile.css");
</style>